<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible width="220">
      <div class="logo">
        <p style="color: rgb(27,238,228); font-size: 16px;">Hi~, {{userInfo.adminName}}</p>
      </div>
      <!--      mode='inline'内嵌'-->
      <a-menu theme="dark" :default-selected-keys="[$route.path]" mode="inline">
        <a-menu-item key="/superHome/admins">
          <router-link to="admins">
            <a-icon type="contacts" />
            <span>管理员账号管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/superHome/users">
          <router-link to="users">
            <a-icon type="team" />
            <span>用户管理</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/superHome/travel">
          <router-link to="travel">
            <a-icon type="environment" />
            <span>出入数据统计</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/superHome/health">
          <router-link to="health">
            <a-icon type="bar-chart" />
            <span>住户健康信息数据统计</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/superHome/alert">
          <router-link to="alert">
            <a-icon type="alert" />
            <span>智能预警</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" >
        <h1>欢迎使用智慧社区出入证管理系统</h1>
        <div style="position: absolute; right: 50px;top: 5px;">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              <a-avatar :size="36" icon="user" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                修改个人信息
              </a-menu-item>
              <a-menu-item key="2">
                退出登录
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

        <a-modal
          title="修改信息"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <!--        ref,prop用于表单校验;ref用于form,prop用于item;ref也可直接用于item-->
          <a-form-model :model="userInfo" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
            <!--          prop的值为表单域model字段-->
            <a-form-model-item label="密码" prop="adminPass">
              <a-input v-model="userInfo.adminPass" />
            </a-form-model-item>
            <a-form-model-item label="电话" prop="adminPhone">
              <a-input v-model="userInfo.adminPhone"/>
            </a-form-model-item>
            <a-form-model-item label="邮箱" prop="adminEmail">
              <a-input v-model="userInfo.adminEmail"/>
            </a-form-model-item>
          </a-form-model>
        </a-modal>

      </a-layout-header>
      <a-layout-content style="margin: 0 16px">

        <br>

        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <router-view></router-view>
          <!--          <admins-form></admins-form>-->
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Smart Community ©2020 Created by Di Di Di
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false,
      userInfo: {},
      visible: false,
      confirmLoading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      rules: {
        adminPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        adminPhone: [{ required: true, message: '请输入电话', trigger: 'blur' }]
      }
    }
  },
  created () {
    if (localStorage.userInfo) {
      this.userInfo = JSON.parse(localStorage.userInfo)
    }
  },
  methods: {
    onClick ({ key }) {
      if (key === '1') {
        this.showModal()
      } else {
        localStorage.clear()
        // this.$router.push('/login')
        this.$http.get('/admin/logout')
          .then((resp) => {
            console.log(resp)
            if (resp.body.status === 200) {
              localStorage.clear()
              this.$router.push('/login')
            } else {
              this.$message.error('登出失败')
            }
          }, (error) => {
            console.log(error)
            this.$message.error('网络故障')
          })
      }
    },
    showModal () {
      this.visible = true
    },
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          this.$http.put('/admin',
            this.userInfo, { emulateJSON: true })
            .then((resp) => {
              if (resp.body.status === 200) {
                localStorage.userInfo = this.userInfo
                this.$message.success('修改成功')
                this.confirmLoading = false
                this.visible = false
              } else {
                this.$message.error('修改异常')
              }
            }, (error) => {
              console.log(error)
              this.$message.error('请保持网络畅通')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

<style>
  #components-layout-demo-side .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
  span {
    font-size: 16px;
  }
</style>
